<template>
  <div class="books-card">
    <div class="books-card-inner">
      <div class="user-info">
        <div class="avatar">
          <image-card round :src="avatar"></image-card>
        </div>
        <div class="name">{{'天上人间'}}</div>
        <div class="info">书架共有{{data.bookCount}}本书</div>
        <div class="rpoint"></div>
        <div class="info">强烈推荐</div>
      </div>
      <div class="books-info">
        <div class="books-wrapper">
          <div class="books-cover" v-for="(book,index) in data.bookList" :key="index">
            <image-card :src="book.cover"/>
          </div>
        </div>
        <div class="shelf-wrapper">
          <div class="shelf">书架</div>
          <van-icon name="arrow" class="arrow"></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ImageCard from './ImageCard'

  export default {
    name: 'BooksCard',
    components: {ImageCard},
    props: {
      data: Object,
      avatar: {type: String, default: ''},
      isSign: {type: Boolean, default: false},
      signDays: {type: Number, default: 0}
    },
    methods: {
      onBookClick () {
      },
      sign () {
      },
      gotoShelf () {
      }
    }
  }
</script>

<style scoped lang="scss">
  .books-card {
    margin: 20px;
    border-radius: 20px;
    background-image: linear-gradient(-90deg, #53575f 0%, #595b60 100%);

    .books-card-inner {
      padding: 20px 20px 20px 20px;
      box-sizing: border-box;

      .user-info {
        display: flex;
        align-items: center;

        .avatar {
          width: 30px;
          height: 30px;
        }

        .name, .info {
          font-size: 14px;
          color: #fff;
        }

        .name {
          margin-left: 8px;
          margin-right: 8px;
        }

        .info {
          opacity: 0.6;
        }

        .rpoint {
          width: 4px;
          height: 4px;
          background: #a2a2a2;
          border-radius: 50%;
          margin: 0 8px;
        }
      }

      .books-info {
        display: flex;
        margin-top: 16px;

        .books-wrapper {
          display: flex;
          flex: 1;
          justify-content: space-around;
          .books-cover {
            width: 72px;
            height: 100px;
          }
        }

        .shelf-wrapper {
          display: flex;
          align-items: center;

          .shelf {
            width: 11px;
            font-size: 11px;
            word-break: break-word;
            color: #FFF;
            opacity: 0.8;
          }

          .arrow {
            color: #FFFFFF;
            opacity: 0.8;
          }
        }
      }
    }
  }

</style>
